<template>
  <el-row :gutter="10" style="height:100%">
    <el-col :span="7" style="height:100%">
      <div style="display: flex;flex-direction: column;height: 100%;">

        <div style="flex: 1;overflow-y: hidden;" class="menu_group_layout">
          <div style="display: flex;flex-direction: column;height: 100%;">
            <div class="boder-title">载体得分月度表</div>
            <div class="menu_group_wrapper">
              <el-row :gutter="10" class="menu_row" id="menu_group_1">
                <el-col :span="12" class="menu_col">
                  <HomeMenu title="安全得分ABC" :height="menu_col_height" />
                </el-col>
                <el-col :span="12" class="menu_col">
                  <HomeMenu title="领导检查看板" :height="menu_col_height" />
                </el-col>

                <el-col :span="12" class="menu_col">
                  <HomeMenu title="载体隐患管理" name="carryDanger" @menuClick="menuClick"
                    :height="menu_col_height" />
                </el-col>
                <el-col :span="12" class="menu_col">
                  <HomeMenu title="企业隐患管理" name="compDanger" @menuClick="menuClick"
                    :height="menu_col_height" />
                </el-col>
              </el-row>
            </div>
          </div>
        </div>

        <div style="flex: 1;overflow-y: hidden;" class="menu_group_layout">
          <div style="display: flex;flex-direction: column;height: 100%;">
            <div class="boder-title">重点安全管理事项</div>
            <div class="menu_group_wrapper">
              <el-row :gutter="10" class="menu_row">
                <el-col :span="12" class="menu_col">
                  <HomeMenu title="年度安全目标" name="yearTarget" @menuClick="menuClick"
                    :height="menu_col_height" />
                </el-col>
                <el-col :span="12" class="menu_col">
                  <HomeMenu title="安全责任书签署情况" name="safeTarget" @menuClick="menuClick"
                    :height="menu_col_height" />
                </el-col>
                <el-col :span="12" class="menu_col">
                  <HomeMenu title="安全标准化创建情况" name="safeStand" @menuClick="menuClick"
                    :height="menu_col_height" />
                </el-col>
                <el-col :span="12" class="menu_col">
                  <HomeMenu title="双重预防创建情况" name="doublePrevent" @menuClick="menuClick"
                    :height="menu_col_height" />
                </el-col>
              </el-row>
            </div>
          </div>
        </div>

        <div style="flex: 1;overflow-y: hidden;" class="menu_group_layout">
          <div style="display: flex;flex-direction: column;height: 100%;">
            <div class="boder-title">安全事故案例</div>
            <div class="menu_group_wrapper">
              <el-row :gutter="10" class="menu_row">
                <el-col :span="12" class="menu_col">
                  <HomeMenu title="载体安全事故" name="carryEvent" @menuClick="menuClick"
                    :height="menu_col_height" />
                </el-col>
                <el-col :span="12" class="menu_col">
                  <HomeMenu title="典型安全事故" name="hisEvent" @menuClick="menuClick"
                    :height="menu_col_height" />
                </el-col>
                <el-col :span="12" class="menu_col">
                  <HomeMenu title="....." :height="menu_col_height" />
                </el-col>
                <el-col :span="12" class="menu_col">
                  <HomeMenu title="....." :height="menu_col_height" />
                </el-col>
              </el-row>
            </div>
          </div>
        </div>

        <!-- <div style="flex: 1;overflow-y: hidden;padding-top: 10px;">
            <dv-border-box-10>
              <div class="menu_group_wrapper">
                <el-row :gutter="10" class="menu_row">
                  <el-col :span="12" class="menu_col">
                    <HomeMenu title="企业异常事件一览" />
                  </el-col>
                  <el-col :span="12" class="menu_col">
                    <HomeMenu title="历史事故回头看" />
                  </el-col>

                  <el-col :span="12" class="menu_col">
                    <HomeMenu title="....." />
                  </el-col>
                  <el-col :span="12" class="menu_col">
                    <HomeMenu title="....." />
                  </el-col>

                </el-row>
              </div>
            </dv-border-box-10>
          </div> -->

      </div>
    </el-col>
    <el-col :span="10" style="height:100%;">
      <div style="margin: 0px 10px ;display: flex;flex-direction: column;height: 100%;
        justify-content: center;">
        <!-- <dv-charts :option="option1" style="height: 400px;" />
    <dv-charts :option="option1" style="height: 400px;" /> -->
        <div style="flex: 1;margin-top: 0px;">
          <div style="display: flex;flex-direction: column;height: 100%;">
            <div class="boder-title">载体得分月度表</div>
            <div style="flex: 1;" ref="echarts1"> </div>
          </div>

        </div>

        <div style="flex: 1;margin-top: 10px;">
          <div style="display: flex;flex-direction: column;height: 100%;">
            <div class="boder-title">各承租企业得分表</div>
            <div style="flex: 1;" ref="echarts2"> </div>
          </div>
        </div>

      </div>
    </el-col>
    <el-col :span="7" style="height:100%">
      <div style="display: flex;flex-direction: column;height: 100%;">

        <div style="flex: 1;overflow-y: hidden;" class="menu_group_layout">

          <div style="display: flex;flex-direction: column;height: 100%;">
            <div class="boder-title">载体安全生命周期管理</div>
            <div class="menu_group_wrapper">
              <el-row :gutter="10" class="menu_row">

                <el-col :span="12" class="menu_col">
                  <HomeMenu title="新入驻企业安全评估" :height="menu_col_height" />
                </el-col>
                <el-col :span="12" class="menu_col">
                  <HomeMenu title="装修期间安全追踪" :height="menu_col_height" />
                </el-col>

                <el-col :span="12" class="menu_col">
                  <HomeMenu title="退租安全管理追踪" :height="menu_col_height" />
                </el-col>

              </el-row>
            </div>
          </div>
        </div>

        <div style="flex: 1;overflow-y: hidden;" class="menu_group_layout">
          <div style="display: flex;flex-direction: column;height: 100%;">
            <div class="boder-title">应急救援</div>
            <div class="menu_group_wrapper">
              <el-row :gutter="10" class="menu_row">

                <el-col :span="12" class="menu_col">
                  <HomeMenu title="应急预案" :height="menu_col_height" />
                </el-col>
                <el-col :span="12" class="menu_col">
                  <HomeMenu title="应急物资" :height="menu_col_height" />
                </el-col>
                <el-col :span="12" class="menu_col">
                  <HomeMenu title="紧急应变联系人" :height="menu_col_height" />
                </el-col>
                <el-col :span="12" class="menu_col">
                  <HomeMenu title="演练报告" :height="menu_col_height" />
                </el-col>

              </el-row>
            </div>
          </div>
        </div>
        <div style="flex: 1;overflow-y: hidden;" class="menu_group_layout">
          <div style="display: flex;flex-direction: column;height: 100%;">
            <div class="boder-title">安全知识园地</div>
            <div class="menu_group_wrapper">
              <el-row :gutter="10" class="menu_row">

                <el-col :span="12" class="menu_col">
                  <HomeMenu title="安全知识分享" :height="menu_col_height" />
                </el-col>
                <el-col :span="12" class="menu_col">
                  <HomeMenu title="文件及法规下载" :height="menu_col_height" />
                </el-col>
                <el-col :span="12" class="menu_col">
                  <HomeMenu title="安全标准下载" :height="menu_col_height" />
                </el-col>
                <el-col :span="12" class="menu_col">
                  <HomeMenu title="......" :height="menu_col_height" />
                </el-col>

              </el-row>
            </div>
          </div>
        </div>

      </div>
    </el-col>

  </el-row>
</template>

<script>
import HomeMenu from '@/components/HomeMenu';
import barOption1 from './chart/bar1';
import barOption2 from './chart/bar2';
import barOption3 from './chart/bar3';

export default {
  components: {
    HomeMenu,
  },
  data() {
    return {
      menuList: [],
      menu_col_height: 60,
    };
  },
  mounted() {
    setTimeout(() => {
      this.loadCharts();
    }, 500);

    this.menu_col_height =
      document.getElementById('menu_group_1').clientHeight / 2 - 25;
  },
  methods: {
    menuClick(routerName) {
      this.$router.push({ name: routerName });
    },
    loadCharts() {
      this.option1 = barOption3;
      // const container = document.getElementById('container1');
      const myChart = this.$echarts.init(this.$refs.echarts1);
      myChart.setOption(this.option1);

      const myChart1 = this.$echarts.init(this.$refs.echarts2);
      myChart1.setOption(barOption2);

      window.onresize = function () {
        //自适应大小
        myChart.resize();
      };
    },
  },
};
</script>
<style>
.menu_group_wrapper {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.menu_row {
  width: 100%;
}
.menu_col {
  margin-top: 5px;
  height: calc(50% - 5px);
}

.boder-title {
  height: 30px;
  /* color: #40c5f1; */
  color: white;
  line-height: 30px;
  text-align: start;
  font-weight: bold;
  font-size: 15px;
  margin-left: 10%;
  margin-top: 3%;
  transform: translateY(0%);
  font-family: '微软雅黑';
}
.menu_group_layout {
  background: url('~assets/bg_menu_group.png') no-repeat;
  background-size: 100% 100%;
}
</style>